<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呵呵，我是标题</title>
    <script>
        function doBgColor(){
            document.bgColor="red";//严格区分大小写
        }
        function doTitle(){
            // console.log(document.title);//获取标题
            document.title="嘻嘻,我改了你";
        }
        function doBody(){
            console.log(document.body);
        }
        function doWrite(){
            document.write("嘻嘻");
        }
        function doId(){
            //根据id来获取元素的DOM对象，返回的是id为mydiv的第一个对象
            var mydiv=document.getElementById("mydiv");//单个对象,DOM对象
            console.log(mydiv);
        }

        function doName(){
            //根据name属性值获取元素的集合
            var hobby=document.getElementsByName("hobby");
            console.log(hobby);//集合
            console.log(hobby[0]);//DOM对象
            console.log(hobby[1]);//DOM对象
            console.log(hobby[2]);//DOM对象
            console.log(hobby.length);

        }
        function doTagName(){
            //根据标签名获取元素的集合
            var inputs=document.getElementsByTagName("input");
            console.log(inputs);//集合
            console.log(inputs.length);
            console.log(inputs[9]);//DOM对象
        }
        function doClassName(){
            var divs=document.getElementsByClassName("div2");
            console.log(divs);//集合
            console.log(divs[0]);

        }
        function doDivText(){
            // 获取div的DOM对象
            var mydiv=document.getElementById("mydiv");
            // console.log(mydiv.innerHTML);//获取div里面的内容
            mydiv.innerHTML="是杨贵妃呀呀呀呀呀";//设置div里面的内容
        }
        function doInputText(){
            //获取input的DOM对象
            var input=document.getElementById("username");
            // console.log(input.value);//获取值：DOM对象.value
            input.value="杨贵妃";

        }
    </script>
</head>
<body>
    <input type="button" value="设置背景颜色" onclick="doBgColor()">
    <input type="button" value="设置网页标题" onclick="doTitle()">
    <input type="button" value="获取body" onclick="doBody()">
    <input type="button" value="write" onclick="doWrite()">
    <input type="button" value="getElementById" onclick="doId()">
    <input type="button" value="getElementByName" onclick="doName()">
    <input type="button" value="getElementsBtyTagName" onclick="doTagName()">
    <input type="button" value="getElementsByClassName" onclick="doClassName()">
    <input type="button" value="操作div中的文本" onclick="doDivText()">
    <input type="button" value="操作文本框中的value" onclick="doInputText()">
    <div id="mydiv">我是div</div>
    <div id="mydiv">  我是div2</div>
    爱好：
    <input type="checkbox" name="hobby"  value="吃饭">吃饭
    <input type="checkbox" name="hobby"  value="吃饭">吃饭
    <input type="checkbox" name="hobby"  value="打熊熊">打熊熊
    <br>
    <div class="div2">div1</div>
    <div class="div2">div2</div>
    <div class="div2">div3</div>
    <input type="text" id="username" >
      
</body>
</html>